<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选与反选功能</title>
</head>
<body>
    <input type="checkbox" id="qx">全选
        <input type="checkbox" id="fx">反选
        <br>
        <input type="checkbox" name="q">红烧肉
        <br>
        <input type="checkbox" name="q">西红柿鸡蛋
        <br>
        <input type="checkbox" name="q">宫保鸡丁
        <br>
        <input type="checkbox" name="q">酸菜鱼
        <br>
        <input type="checkbox" name="q">小炒
        <script>
            // 通过id值来拿到全选这个元素值
            var qx = document.querySelector('#qx');
            // 通过id值来拿到反选这个元素值
            var fx = document.querySelector('#fx');
            // 通过name的属性名来拿到相关元素值
            var qs = document.getElementsByName('q');
    
            // 实现功能：当选中全选按钮时，所有的选项都被选中
            qx.onclick = function () {
                var isChecked = this.checked;
                for (var i = 0; i < qs.length; i++) {
                    qs[i].checked = isChecked;
                }
            }
    
            // 实现功能：当选中反选按钮时，所有已被选中的都被取消，而所有未被选中的都被选中
            fx.onclick = function () {
                for (var i = 0; i < qs.length; i++) {
                    qs[i].checked =!qs[i].checked;
                }
                // 此下代码：为了实现在反选的过程中，可能存在的选项全被选中的情况
                var count = 0;
                for (var j = 0; j < qs.length; j++) {
                    if (qs[j].checked) {
                        count++;
                    }
                }
                if (count === qs.length) {
                    qx.checked = true;
                } else {
                    qx.checked = false;
                }
            }
    
            // 实现功能：当待被选的选项已被全部选中时，那么全选按钮也要被选中
            var count = 0;
            for (var i = 0; i < qs.length; i++) {
                qs[i].onclick = function () {
                    count = 0;
                    for (var j = 0; j < qs.length; j++) {
                        if (qs[j].checked) {
                            count++;
                        }
                    }
                    if (count === qs.length) {
                        qx.checked = true;
                    } else {
                        qx.checked = false;
                    }
                }
            }
        </script>
</body>
</html>